1

场景

平时在js中存储数据的场景还是很多的,比如:

var data;

$.get("http://demo.com/api", {}, function(res) {
    data = res;
    // ...
});

这时候ajax获取的数据被缓存到data中,这种场景及其普遍。假设突然这个被改成一个函数:

function getData(params) {
    var data;
    $.get("http://demo.com/api", params, function(res) {
        data = res;
        // ...
    });
}

这时候想在外面获取data,就得修改原来的代码,一种方式就是把return data,另一种是把data定义到函数外面。

这时候,这个js要被改成模块:

define("getData", function(require, module, exports) {

    var data;
    function getData(params) {
        $.get("http://demo.com/api", params, function(res) {
            data = res;
            // ...
        });
    }

    module.exports = getData;

});

这时候悲催了,想在别的模块使用data,又得继续修改代码,随着项目增大,代码越改越乱。

data.js

这种情况,就可以使用data.js作为数据的统一存储中心:

define("getData", function(require, module, exports) {

    var Data = require("data.js");

    function getData(params) {
        $.get("http://demo.com/api", params, function(res) {
            Data.set("apiData", res);
            // ...
        });
    }

    module.exports = getData;

});

在另一个模块就可以这么获取数据:

var Data = require("data.js");
var apiData = Data.get("apiData");

数据存储独立存在于函数模块,使用起来非常方便。

项目

Github地址:data.js

项目代码非常非常简单,但是思路很重要哈~


binnng
3.7k 声望308 粉丝

前端工程师